<template>
  <el-row :gutter="16" class="stats-row">
    <el-col :xs="24" :sm="6">
      <StatCard
        title="订单总数"
        :value="localStats.totalOrders"
        icon="Document"
        color="#1890ff"
        :trend="localStats.orderTrend"
        class="stat-card-hover"
      />
    </el-col>
    <el-col :xs="24" :sm="6">
      <StatCard
        title="待处理订单"
        :value="localStats.pendingOrders"
        icon="Clock"
        color="#fa8c16"
        :trend="localStats.pendingTrend"
        class="stat-card-hover"
      />
    </el-col>
    <el-col :xs="24" :sm="6">
      <StatCard
        title="已完成订单"
        :value="localStats.completedOrders"
        icon="Check"
        color="#52c41a"
        :trend="localStats.completedOrderTrend"
        class="stat-card-hover"
      />
    </el-col>
    <el-col :xs="24" :sm="6">
      <StatCard
        title="月度采购金额"
        :value="localStats.monthlyAmount"
        prefix="¥"
        icon="TrendCharts"
        color="#722ed1"
        :trend="localStats.amountTrend"
        class="stat-card-hover"
      />
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { reactive, watch, defineProps } from 'vue'
import StatCard from '@/components/StatCard.vue'

interface PurchaseOrderStats {
  totalOrders: number
  pendingOrders: number
  completedOrders: number
  monthlyAmount: number
  supplierCount: number
  orderTrend: number
  pendingTrend: number
  amountTrend: number
  supplierTrend: number
  completedOrderTrend: number
  pendingOrderTrend: number
}

const props = defineProps<{
  stats: PurchaseOrderStats
}>()

// 创建本地副本以避免直接修改 props
const localStats = reactive({ ...props.stats })

// 监听 props 变化并更新本地副本
watch(() => props.stats, (newVal) => {
  Object.assign(localStats, newVal)
}, { deep: true })
</script>

<style scoped>
.stats-row {
  margin-bottom: 20px;
}

/* 统计卡片悬停效果 */
.stat-card-hover {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.stat-card-hover:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.stat-card-hover:active {
  transform: translateY(-2px);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .stats-row {
    margin-bottom: 16px;
  }
  
  .stat-card-hover {
    margin-bottom: 12px;
  }
}
</style>